<template>
	<view class="">
		<view class="top_back u-p-20">
			<u-row>
				<u-col span="5">
					<view class="">
						<image :src="introduce.coverImgUrl" mode="" class="cover_img"></image>
					</view>
				</u-col>
				<u-col span="7">
					<view class="">
						<view class="">
							<u-tag text="歌单" size="mini" type="error" bg-color="#FFFFFF" />
							<text class="header_name">{{introduce.name}}</text>
						</view>
						<view v-if="introduce.creator" class="u-font-21 ">
							<image class="creator_icon u-m-20" :src="introduce.creator.avatarUrl" mode=""></image>
							<view class="user_name">{{introduce.creator.nickname}}</view>
							<view class="create u-content-color">
								{{createTime}}创建
							</view>
						</view>
						<view class="u-font-22">
							标签：
							<text v-for="(item,index) in introduce.tags" :key="index" class="tage">
								{{item}}<text v-if="index+1 != introduce.tags.length" class="gap">/</text>
							</text>
						</view>
						<view class="u-font-22 u-p-b-40">
							简介：{{introduce.description}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		<!-- 歌曲列表 -->
		<view class="u-font-30" v-if="curNow==0">
			<view :class="(index%2 ==0 ? 'u-p-t-30 u-p-b-30' : 'u-p-t-30 u-p-b-30 gray')" @click="show_music(item.id)"
				v-for="(item,index) in introduce.tracks" :key="index">
				<u-row>
					<u-col span="1">
						{{index+1}}
					</u-col>
					<u-col span="5">
						<view class="text_is_beyond">
							{{item.name}}
						</view>
						<view class="text_is_beyond u-font-25 u-tips-color">
							<text v-for="(value,num) in item.ar" :key="num">
								{{value.name}}<text v-if="item.ar.length != num+1">/</text>
							</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="text_is_beyond">
							{{item.al.name}}
						</view>
					</u-col>
					<u-col span="2">
						<view v-if="item.dt<60000">00:{{item.dt/1000}}</view>
						<view v-else>
							<view>
								<text v-if="parseInt(item.dt/60000)<10">0</text>
								{{parseInt(item.dt/60000)}}:
								<text v-if="(parseInt(item.dt/1000-parseInt(item.dt/60000)*60))<10">0</text>
								{{parseInt(item.dt/1000-parseInt(item.dt/60000)*60)}}
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 底部播放 -->
		<play class="play" :id='musicId'></play>
		<!-- 评论 -->
		<view v-if="curNow==1">
			<view class="u-border u-p-10 u-font-25" v-for="(item,num) in comments" :key="item.id">
				<u-row>
					<u-col span="2">
						<view class="">
							<u-avatar :src="item.avatarUrl"></u-avatar>
						</view>
					</u-col>
					<u-col span="10">
						<view class="u-m-l-20">
							<view class="">
								<text class="nickname">{{item.nickname}}:</text>
								<text class="content">{{item.content}}</text>
							</view>
							<view class="">
								<view class="bottom sort">{{item.timeStr}}</view>
								<view class="bottom sort right">
									<u-icon name="thumb-up"></u-icon>
									({{item.likedCount}})
								</view>
							</view> 
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import play from '../../components/play_music/play.vue'
	export default {
		components: {
			play
		},
		data() {
			return {
				introduce: [],
				createTime: '',
				music_time:0,
				comments:[],
				list: [{
						name: '歌曲列表'
					},
					{
						name: '评论'
					}],
				curNow: 0, 
				musicId:0
			}
		},
		onLoad(option) {
			let id = option.id;
			uni.request({
				url: "https://www.codeman.ink/api/playlist/detail",
				data: {
					id: id
				},
				method: 'GET',
				success: (res) => { 
					console.log(res.data.playlist.tracks);
					this.introduce = res.data.playlist;
					this.createTime = res.data.playlist.createTime;
					let time = new Date(this.createTime);
					this.createTime = time.getFullYear() + "年" + (time.getMonth() + 1) + "月" + time.getDate() +"日";

				}
			})
			uni.request({
				url:"https://www.codeman.ink/api/comment/playlist",
				data:{
					id:id 
				},
				method: 'GET', 
				success: (res) => {
					// console.log(res);
					// this.comments = res.data.hotComments;
					// console.log();
					
					res.data.hotComments.forEach((item,index)=>{
						let num = {};
						num.id = item.commentId;
						num.avatarUrl = item.user.avatarUrl;
						num.nickname = item.user.nickname;
						num.content = item.content;
						num.timeStr = item.timeStr;
						num.likedCount = item.likedCount;
						this.comments.push(num);
						 
					})
					console.log(this.comments);
				}
			})
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			show_music(iss){
				this.musicId = iss;
			}
		}
	}
</script>

<style>
	.cover_img {
		width: 252rpx;
		height: 252rpx;
		border-radius: 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.2);
	}

	.header_name {
		font-size: 28rpx;
		font-weight: bold;
	}

	.creator_icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.head_top {
		display: inline-block;
	}

	.top_back {
		background-color: #fafafa;
	}

	.tage {
		color: #8acffa;
	}

	.gap {
		color: #000000;
	}

	.user_name {
		text-indent: 20rpx;
		display: inline-block;
		position: relative;
		top: 50%;
		left: 15%;
		transform: translate(-50%, -50%);
	}

	.create {
		text-indent: 20rpx;
		display: inline-block;
		position: relative;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
	}
	.nickname {
		color: #0c73c2;
	}
	
	.content {
		color: #7d7d94;
	}
	
	.bottom {
		color: #999999;
	}
	
	.sort {
		display: inline-block;
	}
	
	.right {
		float: right;
	}
	.gray{
		background-color: pink;
	}
	.play {
		width: 100%;
		bottom: 0upx;
		padding: 20upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
		bottom: constant(safe-area-inset-bottom);
		
	}
</style>
